<template>
    <el-popover  placement="right" :width="miniWin?200:300" trigger="click" @show="getRankList">
        <div :class="miniWin?'miniwin':''">
            <el-row>
                <el-button icon="el-icon-refresh" size="mini" type="text" @click="getRankList">刷新</el-button>
                
                <el-link type="warning" v-if="name" class="ml20">{{name}}</el-link>
            </el-row>
            <el-row style="min-height:200px;max-height:300px;overflow:auto;">
                <el-row v-for="(item,idx) in list" :key="idx" class="mt5" :class="getRateColor(item[fields.rate])">
                    <span class="colspanmid" v-if="link">
                        <a target="_blank" :href="getLink(item[fields.code])"  title="跳转到详情页">
                            <span class="fsize" :class="getRateColor(item[fields.rate])">{{item[fields.code]}}</span>
                        </a>
                    </span>
                    <span class="colspanmid" v-else>
                        <template v-if="item[fields.realCode]"> <!--板块-->
                            <el-popover placement="right" :open-delay="500" trigger="hover" @show="item.showTimeLine=true" @hide="item.showTimeLine=false">
                                <div style="min-height:400px;display:flex;flex-direction:row;flex-wrap:nowrap">
                                    <timeLine :code="item[fields.realCode]" size="high" v-if="item.showTimeLine"></timeLine>
                                    <kLine :code="item[fields.realCode]" size="high" v-if="item.showTimeLine"></kLine>
                                </div>
                                <span style="text-decoration:underline" slot="reference">{{item[fields.code]}}</span>
                            </el-popover>
                            <!-- {{item[fields.name]}} -->
                        </template>
                        <template v-else>
                            {{item[fields.code]}}
                            
                        </template>
                    </span>
                    <span class="colspanmid">
                        <template v-if="isNaN(item[fields.name])">
                            
                            <template v-if="isNaN(item[fields.code])"> <!--板块-->
                                {{item[fields.name]}}
                            </template>
                            <template v-else>
                                
                                <el-popover placement="right" :open-delay="500" trigger="hover" @show="item.showTimeLine=true" @hide="item.showTimeLine=false">
                                    <div style="min-height:400px;display:flex;flex-direction:row;flex-wrap:nowrap">
                                        <timeLine :code="item[fields.code]" size="high" v-if="item.showTimeLine"></timeLine>
                                        <kLine :code="item[fields.code]" size="high" v-if="item.showTimeLine"></kLine>
                                    </div>
                                    <span style="text-decoration:underline" slot="reference">{{item[fields.name]}}</span>
                                </el-popover>
                            </template>
                        </template>
                        <template v-else>
                            占: {{item[fields.name]}}%
                        </template>
                    </span>
                    <span class="colspanmid">{{item[fields.cur]/(fixval || 1) | fixed2}}</span>
                    <span class="colspanmid">{{item[fields.rate]/(fixval || 1) | fixed2}}%</span>
                    <span class="colspan">
                        <i class="el-icon-star-off black" @click="addToFav(item)"></i>
                    </span>
                </el-row>
            </el-row>
        </div>
        <el-button slot="reference" :icon="icon" size="mini" type="text" v-if="icon"></el-button>
        <span slot="reference" :title="title" v-else style="text-decoration:underline;cursor:pointer">{{ showName || code}}</span>
    </el-popover>
</template>

<script>
import timeLine from "@/components/chart/timeLine"
import kLine from "@/components/chart/kLine"

export default {
    components:{
        timeLine,
        kLine
    },
    props:["code","name","url","title","icon","fixval","link","fconfig","sortBy","showName","miniWin"],
    data() {
        return {
            list: [],
        }
    },
    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    computed:{
        qryurl(){
            return this.url.replace("++code++",this.code);
        },
        fields(){
            var cfg = Object.assign({},{code:"f12",name:"f14",cur:"f2",rate:"f3",realCode:""},this.fconfig)
            return cfg;
        }
    },

    mounted() {
    },

    methods: {
        addToFav(item){
            this.$emit("addToFav",item)
        },
        getLink(f12){
            if(!this.link) return "";
            return this.link.replace("++f12++",f12)
        },
        getRankList(code){
            this.list=[];
            this.$axios.get(this.qryurl+"&"+Math.random())
            .then((res) => {
                try{
                    var data = res.data.data;
                    var dataobj = data.diff || data.stock;
                    this.list=[];
                    if(typeof(dataobj)=="Array"){
                        this.list = dataobj;
                    }else{
                        for(var i=0;i<1000;i++){
                            var item = dataobj[i];
                            if(!item) break;
                            item.showTimeLine = false;
                            this.list.push(item);
                        }
                    }

                    if(this.sortBy){
                        this.list.sort((a,b)=>{
                            var val1 = Number(a[this.sortBy])
                            var val2 = Number(b[this.sortBy])
                            if(val1>val2){
                                return -1
                            }
                            return 1;
                        })
                    }

    //   "0": {
    //     "f1": 2,
    //     "f2": 13716,
    //     "f3": 1383,
    //     "f12": "300677",
    //     "f13": 0,
    //     "f14": "英科医疗",
    //     "f152": 2
    //   },

                }catch(ex){
                    this.$message.error(ex.message);
                }
            })
        },
    }
}
</script>


<style lang="less" scope>


    .colspanmid{
        display: inline-block;
        min-width: 60px;
        text-align: right;
    }

    .miniwin{
        font-size: 10px;
        .colspanmid{
            min-width: 42px;
        }
    }
</style>